function createShader(gl, type, source) {
    // 2.1创建对应类型的shader
    const shader = gl.createShader(type);
    // 2.2给shader添加数据源
    gl.shaderSource(shader, source);
    // 2.3编译shader
    gl.compileShader(shader);

    const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader;
    }
    gl.deleteShader(shader);
}

function createProgram(gl, vertexShader, fragmentShader) {
    // 3.1创建program
    const program = gl.createProgram();
    // 3.2添加顶点着色器
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // 3.3添加片段着色器
    gl.linkProgram(program);
    const success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
        return program;
    }
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

function setRectangle(gl, x, y, width, height) {

    // // 5.3创建一个包含三角形顶点的数组
    // var positions = [
    //     0, 0,
    //     0, 200,
    //     200, 0,
    //     200, 0,
    //     0, 200,
    //     200, 200
    // ];

    // // 5.4将数据写入缓冲区,通过绑定点向缓冲区中存放数据
    // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    var x1 = x;
    var x2 = x + width;
    var y1 = y;
    var y2 = y + height;

    // 注意: gl.bufferData(gl.ARRAY_BUFFER, ...) 将会影响到
    // 当前绑定点`ARRAY_BUFFER`的绑定缓冲
    // 目前我们只有一个缓冲，如果我们有多个缓冲
    // 我们需要先将所需缓冲绑定到`ARRAY_BUFFER`

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        x1, y1,
        x2, y1,
        x1, y2,
        x1, y2,
        x2, y1,
        x2, y2
    ]), gl.STATIC_DRAW);
}

// 返回 0 到 range 范围内的随机整数
function randomInt(range) {
    return Math.floor(Math.random() * range);
}

function main() {
    // 1.创建glcontext
    var canvas = document.querySelector('#glcanvas');
    var gl = canvas.getContext('webgl');
    if (!gl) {
        return;
    }

    // 2.创建顶点着色器和片段着色器
    // 获取GLSL着色器strings
    const vertexShaderSource = document.querySelector("#vertex-shader").text;
    const fragmentShaderSource = document.querySelector("#fragment-shader").text;
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    // 3.链接两个着色器到program
    const program = createProgram(gl, vertexShader, fragmentShader);

    // 4.告诉顶点数据的位置在哪儿
    const positionAttriabute = gl.getAttribLocation(program, "a_position");
    const colorAttriabute = gl.getAttribLocation(program, "a_color");

    var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
    // lookup uniforms
    var matrixLocation = gl.getUniformLocation(program, "u_matrix");

    // 5.初始化缓冲区
    // 重置画布大小
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
    // 6.2.1设置视口
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    // 6.2.2清空画布
    gl.clearColor(1, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 6.2.3告诉它用我们之前写好的着色程序（一个着色器对）
    gl.useProgram(program);


    for (var i = 0; i < 60; i++) {
        // 5.1创建缓冲区
        var positionBuffer = gl.createBuffer();
        //5.2将positionBuffer绑定到ARRAY_BUFFER(可以将其视为ARRAY_BUFFER=PositionBuffer)
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        //     // 设置矩形位置
        setRectangle(gl, randomInt(600), randomInt(600), randomInt(600), randomInt(300));
        //     // 设置矩形颜色

        var colorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        setColors(gl);
        //     // gl.uniform4f(colorUniformLocation, Math.random(), Math.random(), Math.random(), 1);
        //     // 绘制矩形
        drawScene();
    }


    function drawScene() {
        // 6.绘制

        // 6.2.4启用属性
        gl.enableVertexAttribArray(positionAttriabute);
        // 6.2.5绑定数据，告诉属性如何从positionBuffer（ARRAY_BUFFER）中获取数据
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        var size = 2;          // 每次迭代的组件数为2
        var type = gl.FLOAT;   // 数据为32位浮点数
        var normalize = false; // 不对数据进行归一化
        var stride = 0;        // 0 = 每次迭代移动 size * sizeof(type) 以获取下一个位置
        var offset = 0;        // 从缓冲区的开头开始
        gl.vertexAttribPointer(
            positionAttriabute, size, type, normalize, stride, offset);

        // 6.2.4启用属性
        gl.enableVertexAttribArray(colorAttriabute);
        // 6.2.5绑定数据，告诉属性如何从positionBuffer（ARRAY_BUFFER）中获取数据
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

        var size = 4;          // 每次迭代的组件数为2
        var type = gl.FLOAT;   // 数据为32位浮点数
        var normalize = false; // 不对数据进行归一化
        var stride = 0;        // 0 = 每次迭代移动 size * sizeof(type) 以获取下一个位置
        var offset = 0;        // 从缓冲区的开头开始
        gl.vertexAttribPointer(
            colorAttriabute, size, type, normalize, stride, offset);

        var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);

        // Set the matrix.
        gl.uniformMatrix3fv(matrixLocation, false, matrix);

        gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
        // gl.uniform4f(colorUniformLocation, 1, 0, 0, 1);
        // 6.2.6绘制
        gl.drawArrays(gl.TRIANGLES, 0, 6);
    }
}

function setColors(gl) {
    // Pick 2 random colors.
    var r1 = Math.random();
    var b1 = Math.random();
    var g1 = Math.random();
    var r2 = Math.random();
    var b2 = Math.random();
    var g2 = Math.random();

    gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array([
            Math.random(), Math.random(), Math.random(), 1,
            Math.random(), Math.random(), Math.random(), 1,
            Math.random(), Math.random(), Math.random(), 1,
            Math.random(), Math.random(), Math.random(), 1,
            Math.random(), Math.random(), Math.random(), 1,
            Math.random(), Math.random(), Math.random(), 1
        ]),
        gl.STATIC_DRAW);
}

main()